<template>
    <div class="px-13px pt-8px pb-40px bg-#3f3f3f">
        <div class="flex justify-between items-center text-15px font-bold">
            <div>- 审核状态</div>
            <div class="flex items-center gap-4px" @click="emit('back')">
                <i class="backIcon"></i>
                <span>返回</span>
            </div>
        </div>

        <nut-input v-model="value" class="rounded-full h-30px my-14px" readonly>
            <template #right>
                <TriangleDown color="#1c1c1c" size="8px" />
            </template>
        </nut-input>

        <div class="space-y-15px">
            <div v-for="item in list" :key="item.name" class="flex items-center gap-10px bg-#2f2f2f rounded-full p-5px">
                <img src="../../images/logo.webp" alt="" class="w-60px h-60px rounded-full">
                <div class="flex-1">
                    <div class="text-12px text-#a7a7a7 lh-21px">{{ item.name }}</div>
                    <div class="text-9px lh-16px">游戏类型：<span class="text-#8ee3ff">{{ item.tyeps.join(',') }}</span></div>
                    <div class="text-9px lh-16px">送审日期：{{ item.time }}</div>
                </div>
                <div class="text-24px mr-12px font-bold">{{ item.status }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TriangleDown } from '@nutui/icons-vue';

const emit = defineEmits(['back'])
const value = ref('')
const list = ref([
    {
        name: 'LUST GODDESS',
        tyeps: ['休闲', '角色', '模拟经营'],
        status: '审核中',
        time: '2025-04-05 12:00:00'
    },
    {
        name: 'LUST GODDESS',
        tyeps: ['休闲', '角色', '模拟经营'],
        status: '审核中',
        time: '2025-04-05 12:00:00'
    }
])
</script>

<style scoped lang="scss">
.backIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../../../../assets/back.png') no-repeat center;
    background-size: contain;
}
</style>
